<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>熊猫优选</title>
    <!-- 引入样式重置 -->
    <link rel="stylesheet" href="./css/reset.css">
    <!-- 引入details。css -->
    <link rel="stylesheet" href="./css/details.css">
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="./img/字体图标/iconfont.css">

</head>

<body>
    <!-- 页头 -->
    <div id="top" class="banxin">
        <!-- logo -->
        <div class="logo">
            <img click="hsy()" src="./img/logo.png" alt="">
            <div>
                <h3>熊猫优选</h3>
                <span>XIONG MAO YOU XUAN</span>
            </div>
        </div>
        <!-- 搜索栏 -->
        <div class="search">
            <span class="iconfont icon-sousuo"></span>
            <input type="text" placeholder="搜索商品，发现更多优惠">
            <a href="#">搜索</a>
        </div>
        <!-- 图标 -->
        <div class="icon">
            <ul>
                <li>
                    <img src="./img/baoyou.png" alt="">
                    <span>全程包邮</span>
                </li>
                <li>
                    <img src="./img/tuihuan.png" alt="">
                    <span>七天退换</span>
                </li>
                <li>
                    <img src="./img/pinzhi.png" alt="">
                    <span>品质保证</span>
                </li>
            </ul>

        </div>
    </div>
    <!-- 导航栏 -->
    <div id="nav">
        <ul class="banxin">
            <li class="default" onclick="hsy()">首页</li>
        </ul>
    </div>
    <!-- 内容 -->
    <div id="neir">
        <div class="shang banxin">
            <!-- 放大镜 -->
            <div class="fdj">
                <div class="container" id="glassone">
                    <div class="left">
                        <div class="show-box">
                            <img class="" src="" alt="显示图片">
                            <div class="mask"></div>
                        </div>
                        <ul class="tu11">

                        </ul>
                    </div>
                    <div class="right yyy">
                        <img src="./image/big_1.jpg" alt="大背景图">
                    </div>
                </div>
            </div>
            <!-- 文字 -->
            <div class="wenzhi">
                <img class="box2" src="./img/logoxqy2.png" alt="">
                <span class="spwz"></span>
                <i></i>
                <p>
                    <span>券后价 : ¥</span><span class='zhj'></span><small></small>
                </p>
                <h2></h2>
                <h3 class="sq"></h3>
                <button>领券购买</button>
                <button onclick="jrgwc()">加入购物车</button>
            </div>
        </div>
        <div class="xia" class="banxin">

        </div>

    </div>
    <!-- 页脚 -->
    <div id="botton">
        <div class="banxin">
            <img src="./img/logo2.png" alt="">
            <h3>熊猫优选</h3>
            <p>年轻人网购首选 购物领券更省钱</p>
            <a href="#"><span> | </span> 下载app</a>
        </div>
    </div>

    <!-- 返回顶部按钮 -->
    <div class="plug-in yyy">
        <span class="iconfont icon-xiangshang
        "></span> <br> 顶部
    </div>

    <!-- jq引入 -->
    <script src="./js/jquery-3.6.0.js"></script>
    <!-- 引入模板引擎 -->
    <script src="./js/template-web.js"></script>
    <!-- 获取商品图片字符串模板 -->
    <script id="see" type="text/html">
        <ul class="ul">
            {{each list}}
            <li colick="htp()"><img src="{{$value.url}}" alt=""></li>
            {{ /each }}
        </ul>
    </script>
    <!-- 引入datailis.js -->
    <script src="./js/details.js"></script>
    <!-- 引入放大镜js -->
    <script src="./js/glassZoom.js"></script>
</body>

</html>